import { CommonComponentProps } from "../Page/dev";
import { useMaterailDrop } from "../../../hooks/useMaterialDrop";
import classNames from "classnames";

const Container = ({ id, children , styles }: CommonComponentProps) => {
	const { canDrop, drop } = useMaterailDrop(["Button", "Container"], id);
	return (
		<div
			data-component-id={id}
			ref={drop}
			className={classNames("Container" , canDrop ? "BlueBorder" :"BlackBorder")}
            style={styles}
		>
			{children}
		</div>
	);
};

export default Container;
